<template>
    <div class="UserDataA">
        <el-menu :data="list" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <!-- 
                <leftRightSwiperScroll v-if="isLoading"></leftRightSwiperScroll> 
            -->
            <el-menu-item 
            v-for="(item,index) in list" 
            :key = "item.id"
            @click="handleClick(index)"
            :index="item.id">{{ item.label }}</el-menu-item>

            <!-- 
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> 
            -->

        </el-menu>

        <div class="line"></div>
        
        <QuestionView :currentData="current"></QuestionView>
    </div>
</template>

<script>
import QuestionView from '../../src/components/QuestionView'
export default {
    components:{
        QuestionView
    },
    data() {
        return {
            activeIndex: '1',
            list:[
                {id:'1',label:'入驻B站'},
                {id:'2',label:'营销策划'},
                {id:'3',label:'极速找号'},
                {id:'4',label:'投前分析'},
                {id:'5',label:'询价询档'},
                {id:'6',label:'检测效果'},
                // {id:'7',label:'结果复盘'},
            ],
            // tab栏的核心是当前下标的变量
            current:0
        };
    },
    methods: {
        // ElementUI
        handleSelect(key, keyPath) {
            console.log('ElementUI:',key, keyPath);
        },
        // 点击的时候改变current
        handleClick(index){
            this.current = index;
            console.log('this.current:',this.current);
        }
    }
};
</script>

<style scoped lang='less'>

</style>